import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
// --------------------------------------------//
import 'package:pacsun/provider/userProv.dart' show UserProvider;
import 'package:provider/provider.dart';
// --------------------------------------------//
import './createInspiration.dart' show InspirationCard;
import 'package:pacsun/view/create/createBecomeCreator.dart' show BecomeCreator;

class CreateNewerMain extends StatefulWidget {
  final bool showGuide;

  const CreateNewerMain({super.key, this.showGuide = false});

  @override
  State<CreateNewerMain> createState() => _CreateNewerMainState();
}

class _CreateNewerMainState extends State<CreateNewerMain> {
  @override
  void initState() {
    super.initState();
    if (widget.showGuide) {
      // 如果需要，也可以在这里添加新用户的指南逻辑
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.black,
      appBar: AppBar(backgroundColor: Colors.transparent, elevation: 0),
      body: Stack(
        // Use Stack to overlay the button
        children: [
          CustomScrollView(
            slivers: [
              SliverAppBar(
                expandedHeight: 400,
                pinned: true,
                backgroundColor: Colors.transparent,
                flexibleSpace: FlexibleSpaceBar(
                  background: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        stops: const [0.0, 0.2, 0.35, 0.6, 1.0],
                        colors: const [
                          Color(0xFF19425F),
                          Color(0xFF1C396D),
                          Color(0xFF1A2337),
                          Color(0xFF181C22),
                          Colors.black,
                        ],
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const SizedBox(height: 70),
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text(
                              'Create, Share, Earn',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 24,
                                letterSpacing: 0,
                                fontFamily: 'Poppins',
                                fontWeight: FontWeight.w600,
                                color: const Color.fromRGBO(255, 255, 255, 1),
                              ),
                              textScaler: TextScaler.noScaling,
                            ),
                          ],
                        ),
                        SizedBox(height: 73.h),
                        const WhatToEarnBox(),
                        SizedBox(height: 18.h),
                        const _BreakLine(text: 'Featured Creators'),
                        SizedBox(height: 22.h),
                        FeaturedCreatorDisplaying(),
                        SizedBox(height: 18.h),
                        // SizedBox(height: 500.h),
                      ],
                    ),
                  ),
                ),
              ),
              // Scrollable Fashion Trend content
              SliverToBoxAdapter(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: Material(
                    elevation: 4,
                    borderRadius: BorderRadius.circular(12),
                    color: const Color.fromRGBO(17, 17, 17, 1),
                    child: Column(
                      children: [
                        SizedBox(height: 8.h),
                        const _BreakLine(text: 'Fashion Trend'),
                        SizedBox(height: 16.h),
                        const InspirationCard(),
                        SizedBox(height: 100.h),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
          // Fixed button at bottom
          Positioned(
            bottom: 20,
            left: 20,
            right: 20,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red,
                padding: EdgeInsets.symmetric(vertical: 16.h),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(27.5)),
              ),
              onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) =>
                          const BecomeCreator(sourceIndex: 2))),

              //  context.read<UserProvider>().becomeCreator(context),
              child: Text(
                'BECOME A CREATOR',
                style: TextStyle(
                  fontFamily: 'Poppins',
                  fontWeight: FontWeight.w600,
                  fontSize: 20.sp,
                  height: 30 / 18,
                  letterSpacing: 0,
                  color: Color.fromRGBO(255, 255, 255, 1),
                ),
                textScaler: TextScaler.noScaling,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class WhatToEarnBox extends StatelessWidget {
  const WhatToEarnBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.topCenter,
        children: [
          // Main container
          Container(
            height: 160.h,
            width: 343.w,
            decoration: BoxDecoration(
              color: const Color.fromRGBO(34, 34, 34, 1),
              borderRadius: BorderRadius.circular(12.r),
            ),
            child: Column(
              children: [
                // First row with lines and text
                Padding(
                  padding: EdgeInsets.only(top: 18.h),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      // Left line
                      Container(
                        width: 66.w,
                        height: 1.h,
                        //  margin: EdgeInsets.only(right: 8.w),
                        decoration: BoxDecoration(
                          border: Border.all(
                              color: Colors.white.withOpacity(0.3), width: 1),
                        ),
                      ),
                      // Text
                      const Text(
                        'What To Earn',
                        style: TextStyle(
                          fontFamily: 'Poppins',
                          fontWeight: FontWeight.w500,
                          fontSize: 18,
                          height: 22 / 18, // line-height / font-size
                          letterSpacing: 0,
                          color: Colors.white,
                        ),
                        textScaler: TextScaler.noScaling,
                      ),
                      // Right line
                      Container(
                        width: 66.w,
                        height: 1.h,
                        //  margin: EdgeInsets.only(left: 8.w),
                        decoration: BoxDecoration(
                          border: Border.all(
                              color: Colors.white.withOpacity(0.3), width: 1),
                        ),
                      ),
                    ],
                  ),
                ),

                // Add your second row content here
                const SizedBox(height: 15),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      _WhatToEarnItms(
                          iconPath: 'assets/icons/icon_fashion_pioneer.png',
                          text: 'Fashion Pioneer'),
                      _WhatToEarnItms(
                          iconPath:
                              'assets/icons/icon_exclusive_products.png', // Example icon
                          text: 'Exclusive Products'),
                      _WhatToEarnItms(
                          iconPath:
                              'assets/icons/icon_get_rewarded.png', // Example icon
                          text: 'Get Rewarded'),
                      _WhatToEarnItms(
                          iconPath:
                              'assets/icons/icon_earn_more.png', // Example icon
                          text: 'Earn\nMore'),
                    ])
              ],
            ),
          ),
          // Star icon
          Positioned(
            top: -15.h,
            child: Image.asset(
              'assets/icons/icon_yellow_star.png',
              width: 30.w,
              height: 30.h,
              fit: BoxFit.contain,
            ),
          ),
        ],
      ),
    );
  }
}

// Reusable icon-text column widget
class _WhatToEarnItms extends StatelessWidget {
  final String iconPath;
  final String text;

  const _WhatToEarnItms({
    required this.iconPath,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // Icon part
        Image.asset(iconPath, width: 40, height: 40),

        // Text part
        SizedBox(height: 8.h),
        SizedBox(
          width: 80.w, // Give some width for text to breathe
          child: Text(
            text,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontFamily: 'Poppins',
              fontWeight: FontWeight.w400,
              fontSize: 14.sp,
              height: 22 / 14,
              letterSpacing: 0,
              color: Colors.white,
            ),
            textScaler: TextScaler.noScaling,
          ),
        ),
      ],
    );
  }
}

class _BreakLine extends StatelessWidget {
  final String text;

  const _BreakLine({
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 343.w,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // Orange rectangle
          Container(
            width: 3.w,
            height: 12.h,
            margin: EdgeInsets.only(right: 4.w),
            decoration: BoxDecoration(
              color: const Color.fromRGBO(255, 175, 26, 1),
              borderRadius: BorderRadius.circular(1.5.r),
            ),
          ),
          const SizedBox(width: 7),
          // Text
          SizedBox(
            width: 165.w,
            height: 22.h,
            child: Text(
              text,
              style: TextStyle(
                fontFamily: 'Poppins',
                fontWeight: FontWeight.w500,
                fontSize: 18.sp,
                height: 22 / 18,
                letterSpacing: 0,
                color: Color.fromRGBO(255, 255, 255, 1),
              ),
              textScaler: TextScaler.noScaling,
            ),
          ),
        ],
      ),
    );
  }
}

class FeaturedCreatorDisplaying extends StatelessWidget {
  // Sample creator data - replace with your actual data
  final List<Map<String, String>> creators = [
    {'image': 'assets/imgs/img_creator1.png', 'name': 'Alex Artist'},
    {'image': 'assets/imgs/img_creator2.png', 'name': 'Taylor Maker'},
    {'image': 'assets/imgs/img_creator3.png', 'name': 'Casey Creator'},
    {'image': 'assets/imgs/img_creator4.png', 'name': 'Jordan Designer'},
    {'image': 'assets/imgs/img_creator2.png', 'name': 'Riley Builder'},
    {'image': 'assets/imgs/img_creator1.png', 'name': 'Alex Artist'},
    {'image': 'assets/imgs/img_creator2.png', 'name': 'Taylor Maker'},
    {'image': 'assets/imgs/img_creator3.png', 'name': 'Casey Creator'},
  ];

  FeaturedCreatorDisplaying({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 82.h, // Increased height to accommodate name
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        itemCount: creators.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: EdgeInsets.only(right: 16.w),
            child: CreatorCard(
              imagePath: creators[index]['image']!,
              name: creators[index]['name']!,
            ),
          );
        },
      ),
    );
  }
}

// Reusable Creator Card Widget
class CreatorCard extends StatelessWidget {
  final String imagePath;
  final String name;
  final double imageSize;
  final TextStyle? nameStyle;

  const CreatorCard({
    super.key,
    required this.imagePath,
    required this.name,
    this.imageSize = 54,
    this.nameStyle,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // Image Part (Top)
        Container(
          width: imageSize.w,
          height: imageSize.h,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 2.w),
            image: DecorationImage(
              image: AssetImage(imagePath),
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(height: 8.h), // Space between image and name
        // Name Part (Bottom)
        SizedBox(
          width: imageSize.w + 20.w, // Slightly wider than image
          child: Text(name,
              style: nameStyle ??
                  TextStyle(
                    fontFamily: 'Poppins',
                    fontSize: 12.sp,
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                  ),
              textScaler: TextScaler.noScaling,
              textAlign: TextAlign.center,
              maxLines: 1,
              overflow: TextOverflow.ellipsis),
        ),
      ],
    );
  }
}
